<template>
	<div class="search">
		<div class="b1">
			<div class="da"></div>
			<div class="xi">
				<i class="fa fa-search"></i>
				<input type="text" placeholder="请搜索" v-model="name"/>
			</div>
		</div>
		<div class="b2">
			<div class="box2-film">
				<p class="film">电影/综艺/电视剧</p>
			</div>
		</div>
		<ul>
			<li v-for="item in getDataList" :key="item.id" class="b3">
				<div>
					<img :src="item.img" class="img-wr">
				</div>
				<div class="desc-wraper">
					<p class="name">{{item.name}}</p>
					<p class="desc-color">{{item.score}}</p>
					<p class="desc-color">{{item.actors}}</p>
					<p class="desc-color">{{item.nums}}</p>
					
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	export default{
		name:'search',
		data(){
			return{
				name:'',
				search:[],
				searchResult:[]
			}
		},
		created(){
			this.getPlayData();
		},
		computed:{
			getDataList(){
				return this.search.filter(item=>item.name.indexOf(this.name)>-1)
			}
		},
		methods:{
			getPlayData(){
				axios.get('/mock/search.json')
				.then(response=>{
					console.log(response);
					if(response.status==200){
						if(response.data && response.data.search){
							this.search=response.data.search;
						}
					}
				})
				.catch(function(error){
					console.log(error)
				})
			}
		}
	}
</script>
<style scoped>
	.b1{
	background-color: #EBE8E3;
	height: 50px;
	}
	.da{
		height: 10px;
	}
	.xi{
		background: white;
		width: 90%;
		height: 30px;
		border-radius: 8px;
		margin-left: 10px;
		
	}
	i{
		margin-left: 5px;
		margin-top: 5px;
		background-color: white;
	}
	.img-wr{
		width: 23%;
		margin-bottom:10px ;
		float:left
	}
	.button-wraper{
		float: right;
		line-height: 80px;
	}
	img{
		width: 70px;
	}
	.img-wraper{
		width: 23%;
		margin-bottom:10px ;
		float:left
	}
	.desc-wraper{
		width: 60%;
		float:left
	}
	li{
		margin: 15px;
		overflow: hidden;
		border-bottom: 1px solid #CCCCCC;
	}
	.desc-color{
		color: #666;
		font-size: 14px;
	}
	.name{
		font-size: 18px;
		font-weight:bold ;
	}
	.score{
		color: #FF9900;
		font-weight: bold;
		margin-left: 5px;
	}
	.actors{
		overflow: hidden;
		text-overflow:ellipsis ;
		white-space: nowrap;
	}
	p{
		line-height: 25px;
	}
	button{
		width:50px ;
		height: 30px;
		color: white;
		background-color: royalblue;
		border-radius: 5px;
		border:none;
		font-weight: bold;
		
	}
</style>